<template>
  <div class="orderAdd">
    <el-breadcrumb class="breadcrumb" separator="/">
      <el-breadcrumb-item :to="{ path: '/order' }">我的订单</el-breadcrumb-item>
      <el-breadcrumb-item>新建订单</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="footer-content">
      <el-button type="primary toRight" @click="submit()">提交</el-button>
    </div>
    <div class="orderAdd-content">
      <div class="title">购车人</div>
      <el-row class="info-row credit-imgs">
        <el-col :span="5" class="credit-img-each">
          <upload class="upload" ref="buyer1"></upload> 身份证正面
        </el-col>
        <el-col :span="5" class="credit-img-each">
          <upload class="upload" ref="buyer2"></upload> 身份证背面
        </el-col>
        <el-col :span="5" class="credit-img-each">
          <upload class="upload" ref="buyer3"></upload> 授权书
        </el-col>
        <el-col :span="5" class="credit-img-each">
          <upload class="upload" ref="buyer4"></upload> 授权书面签
        </el-col>
      </el-row>
      <el-row class="info-row">
        <el-col :span="3" class="subTitle">
          姓名：
        </el-col>
        <el-col :span="5">
          <el-input class="info-input" v-model="buyer.customerName" placeholder="请输入"></el-input>
        </el-col>
        <el-col :span="3" class="subTitle">
          身份证号码：
        </el-col>
        <el-col :span="5">
          <el-input class="info-input" v-model="buyer.idCard" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <el-row class="info-row">
        <el-col :span="3" class="subTitle">
          贷款银行：
        </el-col>
        <el-col :span="5">
          <el-select v-model="bankName" placeholder="请选择" class="info-input">
            <el-option v-for="item in $store.state.bank" :key="item.value" :label="item.text" :value="item.label">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3" class="subTitle">
          婚姻状态：
        </el-col>
        <el-col :span="5">
          <el-select v-model="bemarried" placeholder="请选择" @change="_initUpload()" class="info-input">
            <el-option v-for="item in $store.state.marryStatus" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <div class="title" v-if="this.bemarried in ['0','1']">共同购车人</div>
      <el-row class="info-row credit-imgs" v-if="this.bemarried in ['0','1']">
        <el-col :span="5" class="credit-img-each">
          <upload class="upload" ref="commonBuyer1"></upload> 身份证正面
        </el-col>
        <el-col :span="5" class="credit-img-each">
          <upload class="upload" ref="commonBuyer2"></upload> 身份证背面
        </el-col>
        <el-col :span="5" class="credit-img-each">
          <upload class="upload" ref="commonBuyer3"></upload> 授权书
        </el-col>
        <el-col :span="5" class="credit-img-each">
          <upload class="upload" ref="commonBuyer4"></upload> 授权书面签
        </el-col>
      </el-row>
      <el-row class="info-row" v-if="this.bemarried in ['0','1']">
        <el-col :span="3" class="subTitle">
          姓名：
        </el-col>
        <el-col :span="5">
          <el-input class="info-input" v-model="commonBuyer.customerName" placeholder="请输入"></el-input>
        </el-col>
        <el-col :span="3" class="subTitle">
          身份证号码：
        </el-col>
        <el-col :span="5">
          <el-input class="info-input" v-model="commonBuyer.idCard" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <div v-for="item in sponsors" :key="sponsors.customerName">
        <div class="title">担保人</div>
        <el-row class="info-row credit-imgs">
          <el-col :span="5" class="credit-img-each">
            <upload class="upload" ref="sponsor1"></upload> 身份证正面
          </el-col>
          <el-col :span="5" class="credit-img-each">
            <upload class="upload" ref="sponsor2"></upload> 身份证背面
          </el-col>
          <el-col :span="5" class="credit-img-each">
            <upload class="upload" ref="sponsor3"></upload> 授权书
          </el-col>
          <el-col :span="5" class="credit-img-each">
            <upload class="upload" ref="sponsor4"></upload> 授权书面签
          </el-col>
        </el-row>
        <el-row class="info-row">
          <el-col :span="3" class="subTitle">
            姓名：
          </el-col>
          <el-col :span="5">
            <el-input class="info-input" v-model="item.customerName" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="3" class="subTitle">
            身份证号码：
          </el-col>
          <el-col :span="5">
            <el-input class="info-input" v-model="item.idCard" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="3">
            <el-button @click="deleteOne(item)" type="danger">删除</el-button>
          </el-col>
        </el-row>
      </div>
      <el-button @click="addOne()" v-show="this.sponsors.length<5"><i class="el-icon-plus"></i> 新增担保人</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'orderAdd',
  components: {
    upload: require('../../components/other/upload'),
    steps: require('../../components/other/steps'),
    credit: require('../../components/order/credit'),
    customInfo: require('../../components/order/customInfo'),
    carBuyCommon: require('../../components/order/carBuyCommon'),
    carAndCredit: require('../../components/order/carAndCredit'),
    attachment: require('../../components/order/attachment'),
    assurePerson: require('../../components/order/assurePerson'),
    historyLoan: require('../../components/order/historyLoan'),
  },
  data() {
    return {
      buyer: {
        customerName: '',
        idCard: '',
        idCardAddr: '',
      },
      commonBuyer: {
        customerName: '',
        idCard: '',
        idCardAddr: '',
      },
      sponsors: [],
      bankName: '',
      bemarried: '',
      annexBatchNo: '',
      annexBatchNo_c: '',
      orderNo: '',
      activeNameDialog: 'tap1',
      tapListDialog: [
        { name: '客户信息', index: 1, temp: 'customInfo', show: true },
        { name: '共同购车人', index: 2, temp: 'carBuyCommon', show: true },
        { name: '担保人', index: 3, temp: 'assurePerson', show: true },
        { name: '车辆及贷款信息', index: 4, temp: 'carAndCredit', show: true },
        { name: '附件', index: 5, temp: 'attachment', show: true },
      ],
      isEdit: false,
    }
  },
  methods: {
    _initUpload: function() {
      this.$nextTick(() => {
        console.log(this);
        this.$refs.buyer1.isOne = true;
        this.$refs.buyer1.type = 0;
        this.$refs.buyer1.id = this.annexBatchNo;
        this.$refs.buyer1.group = 1;
        this.$refs.buyer1.fileName = "身份证正面";
        this.$refs.buyer1.parent = this;
        this.$refs.buyer2.isOne = true;
        this.$refs.buyer2.type = 0;
        this.$refs.buyer2.id = this.annexBatchNo;
        this.$refs.buyer2.group = 1;
        this.$refs.buyer2.fileName = "身份证背面";
        this.$refs.buyer3.isOne = true;
        this.$refs.buyer3.type = 0;
        this.$refs.buyer3.id = this.annexBatchNo;
        this.$refs.buyer3.group = 1;
        this.$refs.buyer3.fileName = "授权书";
        this.$refs.buyer4.isOne = true;
        this.$refs.buyer4.type = 0;
        this.$refs.buyer4.id = this.annexBatchNo;
        this.$refs.buyer4.group = 1;
        this.$refs.buyer4.fileName = "授权书面签";
        let that = this;
        if (this.bemarried in ['0', '1']) {
          this.$http.post('/annex/')
            .then((response) => {
              if (response.data.success) {
                that.annexBatchNo_c = response.data.data.annexBatchNo;
                that.$refs.commonBuyer1.isOne = true;
                that.$refs.commonBuyer1.type = 0;
                that.$refs.commonBuyer1.id = that.annexBatchNo_c;
                that.$refs.commonBuyer1.group = 2;
                that.$refs.commonBuyer1.fileName = "身份证正面";
                that.$refs.commonBuyer1.parent = that;
                that.$refs.commonBuyer2.isOne = true;
                that.$refs.commonBuyer2.type = 0;
                that.$refs.commonBuyer2.id = that.annexBatchNo_c;
                that.$refs.commonBuyer2.group = 2;
                that.$refs.commonBuyer2.fileName = "身份证背面";
                that.$refs.commonBuyer3.isOne = true;
                that.$refs.commonBuyer3.type = 0;
                that.$refs.commonBuyer3.id = that.annexBatchNo_c;
                that.$refs.commonBuyer3.group = 2;
                that.$refs.commonBuyer3.fileName = "授权书";
                that.$refs.commonBuyer4.isOne = true;
                that.$refs.commonBuyer4.type = 0;
                that.$refs.commonBuyer4.id = that.annexBatchNo_c;
                that.$refs.commonBuyer4.group = 2;
                that.$refs.commonBuyer4.fileName = "授权书面签";
              }
            });
        }

      });
    },
    initUpload() {
      let count = 0;
      this.$nextTick(() => {
        let that = this
        $.each(this.$refs.sponsor1, function(index, value) {
          value.isOne = true;
          value.type = 0;
          value.id = that.sponsors[index].annexBatchNo;
          value.group = 3;
          value.fileName = "身份证正面";
          value.parent = that;
          value.sIndex = count;
          count++;
        })
        $.each(this.$refs.sponsor2, function(index, value) {
          value.isOne = true;
          value.type = 0;
          value.id = that.sponsors[index].annexBatchNo;
          value.group = 3;
          value.fileName = "身份证背面";

        })
        $.each(this.$refs.sponsor3, function(index, value) {
          value.isOne = true;
          value.type = 0;
          value.id = that.sponsors[index].annexBatchNo;
          value.group = 3;
          value.fileName = "授权书";

        })
        $.each(this.$refs.sponsor4, function(index, value) {
          value.isOne = true;
          value.type = 0;
          value.id = that.sponsors[index].annexBatchNo;
          value.group = 3;
          value.fileName = "授权书面签";

        })
      })
    },
    addOne: function() {
      var that = this;
      this.$http.post('/annex/')
        .then((response) => {
          if (response.data.success) {
            var annexBatchNo_s = response.data.data.annexBatchNo;
            that.sponsors.push({
              customerName: '',
              idCard: '',
              annexBatchNo: annexBatchNo_s,
              idCardAddr: '',
            });
            that.initUpload();
          }
        });
    },
    deleteOne: function(item) {
      var index = this.sponsors.indexOf(item)
      if (index !== -1) {
        this.sponsors.splice(index, 1)
      }
      this.initUpload();
    },
    valid: function() {
      if (this.buyer.customerName.trim() === "") {
        this.$message.error('购车人姓名为空，请修改！');
        return false;
      }
      if (!this.$libs.IdentityCodeValid(this.buyer.idCard.trim())) {
        this.$message.error('购车人身份证校验失败，请修改！');
        return false;
      }
      if (this.bankName === "") {
        this.$message.error('请选择银行！');
        return false;
      }
      if (this.bemarried === "") {
        this.$message.error('请选择婚姻状态！');
        return false;
      }
      if (this.bemarried in ['0', '1']) {
        //共同购车人
        if (!this.$libs.IdentityCodeValid(this.commonBuyer.idCard.trim())) {
          this.$message.error('共同购车人身份证校验失败，请修改！');
          return false;
        }
        if (this.commonBuyer.idCard.trim() === this.buyer.idCard.trim()) {
          this.$message.error('身份证号码存在重复，请修改！');
          return false;
        }
      }
      if (this.sponsorShow) {
        for (var i = 0; i < this.sponsors.length; i++) {
          if (this.sponsors[i].idCard === this.buyer.idCard) {
            this.$message.error('身份证号码存在重复，请修改！');
            return false;
          }
          if (this.bemarried in ['0', '1'] && this.sponsors[i].idCard === this.commonBuyer.idCard) {
            this.$message.error('身份证号码存在重复，请修改！');
            return false;
          }
          for (var j = 0; j < i; j++) {
            if (this.sponsors[i].idCard === this.sponsors[j].idCard) {
              this.$message.error('身份证号码存在重复，请修改！');
              return false;
            }
          }
        }
      }
      return true;
    },
    submit: function() {
      var valid = true;
      var formJson = {};
      var orderCreditAddFormList = [];
      if (!this.valid()) {
        return false;
      }

      formJson.terminalType = 'pc';
      formJson.bemarried = this.bemarried;
      formJson.bankName = this.bankName;
      formJson.bankId = this.$libs.jsonGetId(this.$store.state.bank, this.bankName);
      formJson.orderNo = this.orderNo;
      //购车人
      var OrderCreditAddForm1 = {};
      OrderCreditAddForm1.customerType = 1;
      OrderCreditAddForm1.customerName = this.buyer.customerName;
      OrderCreditAddForm1.idCard = this.buyer.idCard;
      OrderCreditAddForm1.annexBatchNo = this.annexBatchNo;
      OrderCreditAddForm1.idCardAddr = this.buyer.idCardAddr;
      orderCreditAddFormList.push(OrderCreditAddForm1);

      if (this.bemarried in ['0', '1']) {
        //共同购车人
        var OrderCreditAddForm2 = {};
        OrderCreditAddForm2.customerType = 2;
        OrderCreditAddForm2.customerName = this.commonBuyer.customerName;
        OrderCreditAddForm2.idCard = this.commonBuyer.idCard;
        OrderCreditAddForm2.annexBatchNo = this.annexBatchNo_c;
        OrderCreditAddForm2.idCardAddr = this.commonBuyer.idCardAddr;
        orderCreditAddFormList.push(OrderCreditAddForm2);
      }

      $.each(this.sponsors, function(index, value) {
        var OrderCreditAddForm3 = {};
        OrderCreditAddForm3.customerType = 3;
        OrderCreditAddForm3.customerName = value.customerName;
        OrderCreditAddForm3.idCard = value.idCard;
        OrderCreditAddForm3.annexBatchNo = value.annexBatchNo;
        OrderCreditAddForm3.idCardAddr = value.idCardAddr;
        orderCreditAddFormList.push(OrderCreditAddForm3);
      })

      formJson.orderCreditAddFormList = orderCreditAddFormList;
      this.$http.post("/order",
        formJson
      ).then((response) => {
        if (response.data.success) {
          this.$confirm('征信资料提交成功', '提交成功', {
            confirmButtonText: '提前录入贷款信息',
            cancelButtonText: '关闭',
            type: 'success'
          }).then(() => {
            this.$router.push({ path: '/loanApplyDeal?orderNo=' + this.orderNo + '&annexBatchNo=' + this.annexBatchNo + '&orderStatus=10' +'&isShowDialog=1'});
          }).catch(() => {
            this.$router.push({ path: '/order' });
          });
        } else {
          this.$message.error(response.data.message + ",请修改！")
        }
        console.log(response.data);
      }).catch(function(response) {
        console.log(response)
      })

    },

  },
  mounted() {
    this.$store.commit('bank', this);
    this.$http.post('/order/uniqueKey')
      .then((response) => {
        if (response.data.success) {
          this.annexBatchNo = response.data.data.annexBatchNo;
          this.orderNo = response.data.data.orderNo;
          this._initUpload()
          this.initUpload();
        }
      });
  }
}

</script>
<style lang="scss">
@import '../../assets/css/site.scss';
.orderAdd {

  padding: 10px 16px;

  .breadcrumb {
    color: #99A9BF;
    font-size: 14px;
    line-height: 18px;
    margin: 8px 0px 10px 0px;
  }
  .orderAdd-content {
    position: absolute;
    top: 45px;
    bottom: 50px;
    left: 20px;
    right: 16px;
    overflow: auto;
    background: #fff;
    padding: 20px;
    .filterText {
      font-size: 14px;
      color: #475669;
      margin: 10px 5px 0px 30px;
    }
  }
  .info-row {
    text-align: center;
  }
  .credit-imgs {
    padding: 0px 20px;
    text-align: center !important;
    font-size: 14px;
    color: #99A9BF;
    .credit-img-each {
      width: 150px;
      margin: 0 5px;
    }
    .credit-img {
      width: 140px;
    }
  }
  .footer-content {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 200px;
    right: 0px;
    height: 36px;
    padding: 12px 100px 12px 50px;
    .toRight {
      position: relative;
      float: left;
      left: 50%;
    }
  }
}

</style>
